<template>
  <div style="flex-grow: 1;position: absolute">
    <div id="centerMap" ref="centerMap" style="height:1000px;width:1300px;"/>
  </div>
</template>
<script>

import Sichuan from '@/components/map/Sichuan.json'
// import * as THREE from '../../assets/js/three.min'
// import * as d3 from '../../assets/js/d'
import wenli from '@/assets/img/sc2.png'

export default {
  name: 'Citys',
  data() {
    return {
      options: {},
      mTime: '',
      charts: '',
      index: -1,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {

    initChart() {

      let markLines = [];

      for (let i = 1; i < Sichuan.features.length; i++) {
        let prev = Sichuan.features[i - 1];
        let next = Sichuan.features[i];
        let obj = {
          fromName: prev.properties?.name,
          toName: "成都市", //next.properties?.name,
          coords: [

            [...prev.properties?.center, 1],
            [	104.065780,30.657498, 1],
          ],
        };
        markLines.push(obj);
      }

      let options = {

        animation: true,
        geo3D: {

          regionHeight: 5,
          top: '-25%',
          left:'-40',
          label: {
            show: true,
            position: "center",
            color: '#fff',
            fontSize: 13,
            padding:10,
            borderRadius:10,
            backgroundColor:"rgba(0,0,0,.6)",
          },
          emphasis: {
            itemStyle: {
              color: '#1a316f',
              opacity: 1
            },
          },
          realisticMaterial: {
            detailTexture: wenli, // 纹理贴图
            textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
            roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
            metalness: 0, // 0材质是非金属 ，1金属
            roughnessAdjust: 0,

            // textureOffset:[-0.07,0.08]
          },
          shading: 'realistic',
          type: 'map',
          map: 'Sichuan',
          regions: [{
            name: '成都市',
            itemStyle: {
              color: '#1a316f',
              opacity: 1
            },
            label: {
              show: true
            },
          }],
          viewControl: {
            distance: 130,
            alpha: 30, // 上下旋转的角度
            beta: 0, // 左右旋转的角度
            animation: true,
            autoRotate: true,
            animationEasingUpdate: "cubicInOut",
            minBeta: -Infinity,
            maxBeta: Infinity,
            autoRotateSpeed:1,
            autoRotateAfterStill:1
            // projection: 'orthographic'
          },
          light: {
            //光照阴影
            main: {
              color: "#fff", //光照颜色
              intensity: 7, //光照强度
              shadowQuality: 'high', //阴影亮度
              shadow: true, //是否显示阴影
              alpha: 55,
              beta: 10
            },
            ambient: {
              intensity: 0.8
            }
          },
          itemStyle: {
            color: 'rgb(8,32,53)',
            borderWidth: 2, // 边框宽度
            borderColor: "#409EFF", // 边框颜色
          },
          roam: false,

        },
        series: [
          {
            type: "lines3D",
            coordinateSystem: "geo3D",
            zlevel: 1,
            polyline: false,
            effect: {
              show: true,
              period: 3,
              trailLength: 0.1,
              trailColor: "#819cd9",
              color: "#fff", //流动点颜色
            },
            lineStyle: {
              normal: {
                color: "#819cd9", //线条颜色
                width: 2,
              },
            },
            blendMode: "lighter",
            data: markLines,
          }
        ],
      }
      let count = 1;
      this.chart = this.$echarts.init(this.$refs.centerMap)
      this.$echarts.registerMap('Sichuan', Sichuan)
      this.chart.setOption(options, true)
      const dataLength = Sichuan.features.length;
      let _this = this
      // let regions = setInterval(function() {
      //   options.geo3D.regions[0].name = Sichuan.features[count].properties.name
      //   // options.geo3D.viewControl.alpha = 34
      //   _this.chart.setOption(options, true)
      //   count ++
      //   if (count === dataLength) {
      //     count = 0
      //   }
      // }, 5000);
    }
  }
};
</script>
<style lang="scss" scoped>


@keyframes rotate4 {
  0% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(0);
  }
  100% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(-360deg);
  }
}
</style>
